<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref, reactive } from 'vue';
import { storage } from '../utils/storage'
import { Me } from '../utils/Consts'
import { getMe } from '../request/apis/UsersApi'
import { useRouter } from "vue-router";
const router = useRouter()
const logout = () => {
  storage('userToken').remove()
  router.push('/')
}
onBeforeMount(() => {
  getMe().then(res => {
  
    Me.msg=res.data.msg
    Me.name=res.data.name
    Me.userId=res.data.userId
    Me.username=res.data.username
  })
})
</script>

<template>
  <div id="index" class="maxView">
    <el-container class="maxView">
      <el-header>
        <el-row :gutter="1" class="headerstyle">
          <el-col :span="18">
            <div>
              <h1 style="height: 50px;line-height: 50px; width: 230px;text-align: center; color: #fff;">检测记录管理系统</h1>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="height: 50;line-height: 50px; width: 100%;padding-right: 30px; text-align: right;">
              <span style="color: #fff;margin-right: 10px;">欢迎你,{{ Me.name }}</span>
              <el-button type="" @click="logout">退出登录</el-button>
            </div>
          </el-col>
        </el-row>
        <div>
        </div>
      </el-header>
      <el-container class="maxView">
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" router="true"
            default-active="/ProductInfo" text-color="#fff">
            <el-menu-item index="/ProductInfo">
              <el-icon><Folder /></el-icon>
              <span>产品信息管理</span>
            </el-menu-item>
            <el-menu-item index="/AssemblyLineInfo">
              <el-icon><FirstAidKit /></el-icon>
              <span>流水线信息管理</span>
            </el-menu-item>
            <el-menu-item index="/UsersInfo">
              <el-icon><User /></el-icon>
              <span>用户信息管理</span>
            </el-menu-item>
            <el-menu-item index="/OrderInfo">
              <el-icon>
                <document />
              </el-icon>
              <span>订单信息管理</span>
            </el-menu-item>
            <el-menu-item index="/DefectLog">
              <el-icon><InfoFilled /></el-icon>
              <span>检测缺陷日志</span>
            </el-menu-item>
            <el-menu-item index="InspectorCords">
              <el-icon><Search /></el-icon>
              <span>检测记录</span>
            </el-menu-item>
            <el-menu-item index="/OperationLog">
              <el-icon><Notebook /></el-icon>
              <span>操作日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container class="maxView">
          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.maxView {
  width: 100%;
  height: 100%;
}

.headerstyle {
  width: 100%;
  height: 100%;
  background: #545c64;
}

.el-main,
.el-aside,
.el-header {
  padding: 3px;
}
</style>
